<%@ page contentType="text/html;charset=UTF-8" language="java"
isELIgnored="false" %>
<%@ include file="../includes/common.jsp" %>
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>上传文件</title>
        <meta name="search" content="price" />
        <meta name="author" content="chunhai.chen(15317227@qq.com)" />
		<c:set var="requester" value="<%=request.getServerName()+ (request.getServerPort()==80 ? "" : ":"+request.getServerPort())%>"/>
    </head>
    <body>
        <div class="main">
        	
            <c:if test="${not empty attachment}">
			<table width='100%' id="customerTable" class="yui-grid">
				<thead>
					<tr>
						<th nowrap><A href="/admin/attachment/edit.asp?uid=${attachment.uid }">编辑</A></th>
						<th colspan="2" align='left' nowrap>
						<p style='font-size: 20px;margin:0'>[<A href="/admin/attachments.asp">返回</A>]文件：${attachment.name }</p>
						</th>
					</tr>
				</thead>
				
				<tbody>                
                <c:choose>
                    <c:when test="${attachment.image}">
                    	<tr><td></td><td colspan="2">缩放图</td> </tr>
                    	<tr><td></td><td nowrap>图片</td><td><img id='thumbnail' style='width: 250px;height: 218px;' title="${attachment.name }" alt="${attachment.name }" src="/gaeimage/thumbnail/250/218/${attachment.uid }.${attachment.fileExt }"></td></tr>
                    	<tr>
                    		<td></td><td nowrap>尺寸</td>
							<td>
								<table width=100% background="#fff">
									<tr>
										<th nowrap width=1>自定：</th>
										<th nowrap width=1><span id="widthxheight">250X218</span></th>
										<th nowrap width=1><input id='thumbnailwidth' type='text' name='width' size='4' value='250'/></th>
										<th nowrap width=1><input id='thumbnailheight'  type='text' name='height' size='4' value='218'/></th>
										<th nowrap width=1><input id='thumbnailadjust' type='button'  name='submit' value='调整尺寸'/></th>
										<th nowrap width=100%></th>
									</tr>
									<c:if test="${not empty widthHeights}">
										<tr>
											<th nowrap width=1>常用：</th>
											<th nowrap  colspan=5 width=100%>
												<input class="commonwidthheight" type="button"  id="250" name ="218" value="250X218"/>
												<c:forEach items="${widthHeights}" var="v" varStatus="vst">
													<input class="commonwidthheight" type="button"  id="${v.width}" name ="${v.height}" value="${v.width}X${v.height}"/>
												</c:forEach>
											</th>
										</tr>										
									</c:if>
									<tr><th nowrap width=1>说明：</th><th colspan=5>缩放图真实尺寸不一定等于自定义的尺寸，谷歌图片服务根据图片质量自动调整，真实尺寸可以查看图片属性获得</th></tr>
								</table>
							</td>
							
						</tr>
                    	<tr><td><img src="/themes/page_white_copy.png" alt="复制网址" title="复制网址" /> </td><td nowrap>网址</td><td id='thumbnailurl'>http://${requester}/gaeimage/thumbnail/250/218/${attachment.uid }.${attachment.fileExt }</td>
							</tr>
                    	<tr><td> <img src="/themes/page_white_copy.png" alt="复制代码" title="复制代码" /> </td><td nowrap>代码</td><td id='thumbnailcode'>&lt;img  style='height: 250px; width: 250px;'  title='${attachment.name }' alt='${attachment.name }' src='http://${requester}/gaeimage/thumbnail/250/218/${attachment.uid }.${attachment.fileExt }'&gt;</td>
						
						</tr>
                        
                    	<tr><td></td><td colspan="2">原图</td> </tr>
                    	<tr><td></td><td>图片</td><td><img title="${attachment.name }" alt="${attachment.name }" src="/gaeimage/${attachment.uid }.${attachment.fileExt }"></td></tr>
                    	<tr><td> <img src="/themes/page_white_copy.png" alt="复制网址" title="复制网址" /> </td><td>网址</td><td>http://${requester}/gaeimage/${attachment.uid }.${attachment.fileExt }</td>
							</tr>
                    	<tr>
                    		<td> <img src="/themes/page_white_copy.png" alt="复制代码" title="复制代码" /></td>
							<td>代码</td><td>&lt;img title='${attachment.name }'
                            alt='${attachment.name }' src='http://${requester}/gaeimage/${attachment.uid }.${attachment.fileExt }'&gt;
							</td> 
						</tr>
                        
                    </c:when>
                    <c:otherwise>
                    	<tr><td> <img src="/themes/page_white_copy.png" alt="复制网址" title="复制网址" />  </td>
						<td nowrap>文件名称</td><td><A href="http://${requester}/gaefile/${attachment.uid }.${attachment.fileExt }" title="${attachment.name }" alt="${attachment.name }">${attachment.name }</A></td></tr>
                    	<tr><td> <img src="/themes/page_white_copy.png" alt="复制网址" title="复制网址" />  </td><td nowrap>文件类型</td><td>${attachment.fileType }</td></tr>
                    	<tr>
                    		<td> <img src="/themes/page_white_copy.png" alt="复制网址" title="复制网址" />  </td>
							<td nowrap>网址</td><td>http://${requester}/gaefile/${attachment.uid }.${attachment.fileExt }</td></tr>
                    	<tr>
                    		<td><img src="/themes/page_white_copy.png" alt="复制代码" title="复制代码" />  </td>
							<td nowrap>代码</td><td>&lt;A href='http://${requester}/gaefile/${attachment.uid }.${attachment.fileExt }' title='${attachment.name }' alt='${attachment.name }'&gt;${attachment.name }&lt;/A&gt;</td>
						</tr>
                    </c:otherwise>
                </c:choose>
				</tbody>
			</table>
            </c:if>
        </div>
		<script>
			ZeroClipboard.setMoviePath( "/js/ZeroClipboard.swf" );
			$(function(){
				
				$(".commonwidthheight").click(function(){
					var width = $(this).attr("id");
					var height = $(this).attr("name");
					//alert("widthXheight:\n" + width+":"+height);
					$("#thumbnailwidth").val(width);
					$("#thumbnailheight").val(height);
					$("#thumbnailadjust").click();
				});
				
				$("#thumbnailadjust").click(function(){
					var width = $("#thumbnailwidth").val();
					var height = $("#thumbnailheight").val();
					var thumbnailurl = "http://${requester}/gaeimage/thumbnail/"+width+"/"+height+"/"+"${attachment.uid }.${attachment.fileExt }";		
					var thumbnailcode = "<img  style='width: "+width+"px; height: "+height+"px;' title='${attachment.name }' alt='${attachment.name }' src='http://${requester}/gaeimage/thumbnail/"+width+"/"+height+"/${attachment.uid }.${attachment.fileExt }'/>";
								
					$("#widthxheight").text(width+"X"+height);								
					$("#thumbnail").attr("src",thumbnailurl).attr("style","width: "+width+"px; height: "+height+"px;" );
					$("#thumbnailurl").text(thumbnailurl);
					$("#thumbnailcode").text(thumbnailcode);
					

					$("#customerTable tbody td:first-child").each(function() {
						//Create a new clipboard client
							var clip = new ZeroClipboard.Client();
			
							//Cache the first td and the parent row    
							var firstTd = $(this);
							var parentRow = firstTd.parent("tr");
			
							//Glue the clipboard client to the first td in each row
							clip.glue(firstTd[0]);
			
							//Grab the text from the parent row of the icon
							var txt = $.trim($("td:last-child", parentRow).text());
							clip.setText(txt);
			
							//Add a complete event to let the user know the text was copied
							clip.addEventListener('complete', function(client, text) {
								alert("复制成功:\n" + text);
							});
					});								
				});
				
				$("#customerTable tbody td:first-child").each(function() {
					//Create a new clipboard client
						var clip = new ZeroClipboard.Client();
		
						//Cache the first td and the parent row    
						var firstTd = $(this);
						var parentRow = firstTd.parent("tr");
		
						//Glue the clipboard client to the first td in each row
						clip.glue(firstTd[0]);
		
						//Grab the text from the parent row of the icon
						var txt = $.trim($("td:last-child", parentRow).text());
						clip.setText(txt);
		
						//Add a complete event to let the user know the text was copied
						clip.addEventListener('complete', function(client, text) {
							alert("复制成功:\n" + text);
						});
				});			
			});
		</script>
    </body>
</html>
